<template>
  <parallax>
    <div class="flex-column justify-center align-items-center back">
      <div class="backfloat"></div>
      <div style="margin: 5rem 0;text-align: center;width: 70rem">
        <div class="flex-row justify-center flex-wrap" style="width: 70rem;">
          <div
            style="background: #eaf4fb;border-radius: 5px;width: 30rem;height: 20rem;min-width: 240px;min-height: 160px;"
          ></div>
          <!-- <img src="../assets/wisdom/AQI.png" style="border-radius: 5px;width: 30rem;height: 20rem;min-width: 240px;min-height: 160px;" /> -->
          <div
            style="text-align: left;width: 35rem;margin-left: 5rem;min-width: 320px;"
            class="flex-column"
          >
            <h2 class="maincolor text-44">关于智尊地信</h2>
            <div style="margin-top: 2rem;">
              {{ article }}
            </div>
            <div
              class="flex-row justify-between align-items-end"
              style=" flex: 1 0 auto; "
            >
              <div class="aboutcen"></div>
              <div class="aboutcen"></div>
            </div>
          </div>
        </div>
        <div style="margin-top: 10rem;text-align: center;">
          <div class="flex-column justify-center align-items-center">
            <h2 class="maincolor text-44" style="line-height: 3em;">
              我们在做什么
            </h2>
            <div
              style="border-bottom:2px #f0f0f0 solid;width: 20rem;text-align: center;"
            ></div>
            <div
              style="border-bottom:4px #5faee3 solid;width: 5rem;text-align: center;margin-top: -3px;"
            ></div>

            <div
              style="margin-top: 3rem;"
              class="flex-row justify-center  product-content flex-wrap"
            >
              <div class="flex-column align-items-center">
                <div class="header"></div>
                <div class="circle flex-row align-items-center justify-center">
                  <div class="detail"></div>
                </div>
                <div>
                  <div class="text-24 font-700" style="line-height: 2em;">
                    智慧环保
                  </div>
                  <div class="content">{{ article }}</div>
                </div>
              </div>
              <div
                style="margin: 0 2rem;"
                class="flex-column align-items-center"
              >
                <div class="header"></div>
                <div class="circle flex-row align-items-center justify-center">
                  <div class="detail"></div>
                </div>
                <div class="text-24 font-700" style="line-height: 2em;">
                  智慧政务
                </div>
                <div class="content">{{ article }}</div>
              </div>
              <div class="flex-column align-items-center">
                <div class="header"></div>
                <div class="circle flex-row align-items-center justify-center">
                  <div class="detail"></div>
                </div>
                <div class="text-24 font-700" style="line-height: 2em;">
                  智慧城管
                </div>
                <div class="content">{{ article }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </parallax>
</template>

<script>
export default {
  data() {
    return {
      article:
        "这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。这是公司这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。简介的文案"
    };
  }
};
</script>

<style scoped lang="less">
.product-content {
  & > div {
    width: 22rem;
    min-width: 320px;
    height: auto;
    background: #ffffff;
    box-sizing: content-box;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 1rem !important;

    & .header {
      width: 100%;
      height: 6rem;
      background: #b2d5ec;
      border-radius: 5px 5px 0px 0px;
    }
  }
}

.circle {
  // display: inline-block;
  width: 6.4rem;
  height: 6.4rem;
  background: #eaf4fb;
  border-radius: 50%;
  margin-top: -3.2rem;
}

.content {
  padding: 1rem 2rem;
}

.back {
  background: url(../../../assets/wisdom/circle2.png),
    url(../../../assets/wisdom/3.png);
  background-size: 3.25rem 3.25rem 27.3rem 20rem;
  background-repeat: no-repeat;
  background-position: 32% 48%, 0% 60%;
}

.backfloat {
  text-align: center;
  position: absolute;
  top: 3rem;
  right: 0;
  width: 16.5rem;
  height: 16.5rem;
  background: url(../../../assets/wisdom/circle1.png),
    url(../../../assets/wisdom/4.png);
  background-size: 2rem 2rem 16.5rem 15rem;
  background-repeat: no-repeat;
  background-position: 30% 40%, 0% 0%;
}

.aboutcen {
  width: 16rem;
  height: 7rem;
  background: linear-gradient(#4e8dec, #39baea);
  border-radius: 5px;
}

.detail {
  width: 4.4rem;
  height: 4.4rem;
  background: #3498db;
  border-radius: 50%;
}
</style>
